<script lang="ts" setup>
import { ref,onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import service from "@/api";


// var tableData = ref([]);

var check = (select: any, row: any) => {
  console.log(select, row);
};
var checkAll = (a: any) => {
  console.log(a);
};

var tableData = ref([]);

var del = () => {
  console.log(1);
};
var add = () => {
  console.log(2);
};


// 车辆缴费账单
onMounted(async () => {

  // 信息新增   ?
  var res = await service.vehicleBillTable.vehicleBillTable_add({})
  console.log(res);

  // 通过id删除商品
  // var res = await service.vehicleBillTable.vehicleBillTable_deleteById({})
  // console.log(res);

  // 批量删除   ?
  // var res = await service.vehicleBillTable.vehicleBillTable_deletefew({})
  // console.log(res);

  // 租户信息编辑   ？
  // var res = await service.vehicleBillTable.vehicleBillTable_edit({{ ids: '1,2,3' }})
  // console.log(res);

  // 通过id获取信息   ?
  // var res = await service.vehicleBillTable.vehicleBillTable_queryById({})
  // console.log(res);

  // 获取所有租户信息
  // var res = await service.vehicleBillTable.vehicleBillTable_queryByPage()
  // console.log(res);

})
</script>
<template>
  <!-- 车辆缴费账单 -->

  <div class="tenement_sixth">
    <!-- 头部包含了新增  批量删除 -->
    <Header title="车辆缴费账单" @del="del" @add="add" />

    <!-- 内容部分 -->
    <div class="main">

      <!-- 表单部分 -->
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <!-- 表单  输入框 下拉菜单部分 -->
            <div class="left">
              <div class="item">
                <span>车辆号码：</span>
                <el-input placeholder="请输入车辆号码" />
              </div>
              <div class="item">
                <span>联系方式：</span>
                <el-input placeholder="请输入联系方式" />
              </div>
              <div class="select">
                <span>车辆类型：</span>
                <el-select placeholder="请选择">
                  <el-option label="临时车" value="" />
                  <el-option label="包月车" value="" />
                  <el-option label="园区车" value="" />
                </el-select>
              </div>
            </div>
            <!-- 表单   查询 重置 按钮-->
            <div class="btns">
              <el-button type="success" class="chaxun">查询</el-button>
              <el-button type="info" plain>重置</el-button>
            </div>
          </el-form>
        </div>
      </div>

      <!-- 表格部分 -->
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll"
          :keys="['flex', 'name', 'address', 'xinghao', 'weizhi', 'status', 'data', 'time',]"
          :label="['值', '租户名称', '所属楼宇', '房间名称', '合同类型', '合同状态', '签约时间', '到期时间',]">
          <template #btn>
            <span>详情</span>&emsp;&emsp;
            <span>删除</span>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import '@/saas/Table.scss';
</style>
